<template>
  <!-- 问卷答题 -->
  <div class="questionnairePreview">
    <div class="questionnaire-container">
      <div class="ques-cont">
        <h1 class="ques-title">{{ formData.title }}</h1>
        <div class="introduction_area">
          <p>{{ formData.startWords }}</p>
        </div>
        <div class="ques-subject-area">
          <Item
            v-for="(item,index) in formData.questionnaireQuestionDTOList"
            :key="index"
            :item="item"
            :answer="answer"
            :list="formData.questionnaireQuestionDTOList"
            type="2"
            @change="(data)=>{answer=data}"
          ></Item>
        </div>
        <div class="button-container">
          <Button @click="submit">提交</Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Item from './components/Item'
import Button from '@/components/Button'
import { questionnaireDetailById } from '@/api/questionnaire'
export default {
  name: 'QuestionnaireTestPaper',
  components: {
    Item,
    Button
  },
  data() {
    return {
      loading: false,
      answer: {}, // 问卷答案
      formData: {
        // 问卷内容
        endWords: '', // 结束语
        questionnaireSort: 0, // 问卷用途：0回访问卷1质检问卷
        remark: '', // 问卷备注或说明
        startWords: '', // 开场白
        state: 0, // 问卷状态：0未发布1已发布
        title: '', // 问卷标题
        id: '',
        questionnaireQuestionDTOList: []
      }
    }
  },
  mounted() {
    var query = this.$route.query
    if (query.id) {
      this.refresh(query.id)
    } else {
      this.$router.go(-1)
    }
  },
  methods: {
    // 提交
    submit() {
      // console.log(this.answer)
    },
    // 刷新问卷
    refresh(id) {
      this.loading = true
      questionnaireDetailById(id || this.formData.id).then(res => {
        if (res.success === 1) {
          var list = res.data.questionnaireQuestionDTOList
          list.sort((a, b) => {
            return a.displaySerialNumber - b.displaySerialNumber
          })
          var chapter_index = 0
          var topic_index = 0
          var answer = {}
          const childIndex = {}
          list.forEach(e => {
            if (e.questionType === 3) {
              chapter_index += 1
              e.chapter_index_text = this.NoToChinese(chapter_index) + '、'
            } else {
              if (e.prefixQuestionId) {
                if (childIndex[e.prefixQuestionId]) {
                  e.c_index = childIndex[e.prefixQuestionId] + 1
                } else {
                  childIndex[e.prefixQuestionId] = e.c_index = 1
                }
              } else {
                topic_index += 1
              }
              e.topic_index = topic_index
            }
            var itemAnswer = {}
            e.questionOptionDTOList.forEach(option => {
              itemAnswer[option.id] = {
                isSel: false, // 是否选中
                enterContent: '', // 当前项输入内容
                evaluate: '', // 评语
                appeal: '' // 申诉备注
              } // 选中的选项
            })
            answer[e.id] = itemAnswer
            e.questionnaireId = res.data.id
          })
          this.answer = answer
          this.loading = false
          // console.log(this.answer)
          this.formData = res.data
          this.$forceUpdate()
        }
      })
    },
    // 将数字转为中文
    NoToChinese(num) {
      if (!/^\d*(\.\d*)?$/.test(num)) {
        alert('Number is wrong!')
        return 'Number is wrong!'
      }
      var AA = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      var BB = ['', '十', '百', '千', '万', '亿', '点', '']
      var a = ('' + num).replace(/(^0*)/g, '').split('.')
      var k = 0
      var re = ''
      for (let i = a[0].length - 1; i >= 0; i--) {
        switch (k) {
          case 0:
            re = BB[7] + re
            break
          case 4:
            if (
              !new RegExp('0{4}\\d{' + (a[0].length - i - 1) + '}$').test(a[0])
            ) {
              re = BB[4] + re
            }
            break
          case 8:
            re = BB[5] + re
            BB[7] = BB[5]
            k = 0
            break
        }
        if (
          k % 4 === 2 &&
          a[0].charAt(i + 2) !== 0 &&
          a[0].charAt(i + 1) === 0
        ) {
          re = AA[0] + re
        }
        if (a[0].charAt(i) !== 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re
        k++
      }
      if (a.length > 1) {
        // 加上小数部分(如果有小数部分)
        re += BB[6]
        for (let i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)]
      }
      return re
    }
  }
}
</script>
<style lang='scss' scoped>
.questionnaire-container {
  background: #fff;
  border-radius: 4px;
  position: relative;

  .ques-cont {
    padding: 0px 10px 20px;
    overflow-y: auto;
    .ques-title {
      text-align: center;
      font-weight: 400;
      letter-spacing: 5px;
    }
    .introduction_area {
      margin: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      p {
        line-height: 26px;
      }
    }
  }
}
</style>
